// 引入vue路由
import VueRouter from "vue-router";
// 引入About组件
import About from "../pages/About";
// 引入Home组件
import Home from "../pages/Home";
// 引入Home嵌套子组件Message组件
import Message from "../pages/Message";
// 引入Home嵌套子组件News组件
import News from "../pages/News";
// 引入Home嵌套子组件News组件的嵌套子组件Detail组件
import Detail from "../pages/Detail";


// 创建路由器
const router =  new VueRouter({
    // mode属性用于设置路由url模式
    // 1. hash模式
    /*
        浏览器url上/#/...后的所有路径被称为hash值，特点是不会传入这些hash值给服务器
        可以解决浏览器打包上线后路径重新刷新时的404问题
        缺点是url上不干净，不美观
    */

    // 2. history模式
    /*
        浏览器上不会有/#/存在，较为美观，但所有的url字段都会被传入
        所以在打包上线后有可能出现刷新后404问题
        但可通过部分nodejs中间件解决
    */
    // 默认是hash模式
    mode:"history",
    routes:[
        // 一级路由
        {
            path:'/',
            meta:{title:'首页'},
        },
        {
            name:'about',
            path:'/about',
            component:About,
            meta:{isAuth:true,title:'关于'},
        },
        {
            name:'home',
            path:'/home',
            component:Home,
            meta:{title:'首页'},
            children:[
                // 二级路由
                {
                    name:'message',
                    path:'message',
                    component:Message,
                    // meta属性是路由元数据，在路由守卫中可通过该配置中的key-value去判断是否需要放行等
                    meta:{title:'消息'},
                    children:[
                        // 三级路由
                        {
                            name:'detail',
                            path:'detail',
                            component:Detail,
                            meta:{title:'消息具体信息'},
                            props:$route=>{
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                }
                            }
                        }
                    ]
                },
                {
                    name:'news',
                    path:'news',
                    meta:{title:'列表'},
                    component:News,
                    // 独享路由守卫beforeEnter和全局路由守卫beforeEach功能相同
                    // 只是独享路由守卫针对的是单独的这一个路由组件去守卫，而不是所有路由组件

                    // 独享路由守卫没有后置
                }
            ]
        },
    ]
})

// afterEach 后置路由守卫
router.afterEach((to,from)=>{
    // 当成功跳转后将页面标题更改为路由meta配置中对应的title
    console.log("afterEach---"+to.name);
    document.title = to.meta.title
})

// 暴露路由器
export default router